<script setup>


import { ref, onMounted } from 'vue'

const canvas_ref = ref(null)
const props = defineProps(['percentage'])

onMounted(() => {
    const ctx = canvas_ref.value.getContext("2d")
    ctx.beginPath();
    ctx.lineWidth = 8
    ctx.lineCap = 'round'
    ctx.strokeStyle = '#b1b1b1'
    ctx.arc(75, 75, 50, 0, Math.PI * 2, false);
    ctx.stroke();

    ctx.beginPath();
    ctx.fillStyle = '#ffffff'
    ctx.lineWidth = 1
    ctx.arc(75, 75, 46, 0, Math.PI * 2, false);
    ctx.fill();

    // finish percentage
    ctx.beginPath();
    ctx.lineWidth = 8
    ctx.lineCap = 'round'
    ctx.strokeStyle = '#3949AB'
    ctx.arc(75, 75, 50, -Math.PI/2, 2*Math.PI*props.percentage/100-Math.PI/2, false);
    ctx.stroke();
})

</script>
<template>

    <div class="subject-progress-item-container">
        <div class="subject-introduction">
            <div class="introduction" >
                <div class="subject-title">
                    <p>{{$t('homepage.subjectProgressItem.subject_title')}}</p>
                </div>
                <div class="subject-people">
                    <p>{{$t('homepage.subjectProgressItem.subject_people.person_in_charge')}}</p>
                    <p>{{$t('homepage.subjectProgressItem.subject_people.teacher')}}</p>
                </div>
                <div class="subject-create-time">
                    <p>{{$t('homepage.subjectProgressItem.subject_create_time')}}</p>
                </div>
            </div>
        </div>
        <div class="subject-progress">
            <div class="progress" >
                <span>{{props.percentage}}</span>
                <canvas ref="canvas_ref" width="150" height="150">
                </canvas>
            </div>

        </div>

    </div>



</template>
<style scoped>
.subject-progress-item-container {
    display: grid;
    grid-template-areas:
        "introduction progress";
    font-family: Source Han Sans CN;
    font-size: 20px;
    color: #707070;
}

.subject-introduction {
    grid-area: introduction;
    display: flex;
    align-items: center;
}

.subject-introduction .introduction > div {
    margin: 6px 0px;
}


.subject-title p {
    font-size: 24px;
    color: #8493a6;
}

.subject-people {
    display: flex;
    align-items: center;
}

.subject-people p {
    margin-right: 15px;
}

.subject-progress {
    grid-area: progress;
    display: flex;
    /* justify-content: center;*/
    align-items: center;
}

.subject-progress .progress {
    width: 150px;
    height: 150px;
    position: relative;
}

.subject-progress .progress span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.subject-progress .progress span::after {
    content: '%';
}


</style>